|
|
| (7 mellanliggande sidversioner av samma användare visas inte) |
| Rad 1 027: |
Rad 1 027: |
| {{clear}} | | {{clear}} |
|
| |
|
| == Gör ett ritprogram == | | == Andra plattformar för spelutveckling (med Javascript) == |
|
| |
|
| [[Fil:Ritprogram1.PNG|400px|höger]] | | * [http://phaser.io Phaser] |
| | | * [http://processingjs.org/ Processing] |
| Med följande kod kan du rita på canvas med muspekaren. Det gör att du kan bygga ett Paintliknade program. Nedan finns ett exempel men det kommer fler. Koden behöver städas lite också :-)
| |
| | |
| {{Lista |
| |
| <pre>
| |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
| |
| <style>
| |
| body {
| |
| margin: 0;
| |
| }
| |
| canvas {
| |
| border:1px solid #d3d3d3;
| |
| background-color: #f1f1f1;
| |
| }
| |
| </style>
| |
| </head>
| |
| <body onload="startGame()">
| |
| <script>
| |
| var myGamePiece;
| |
| var myUpBtn;
| |
| var myDownBtn;
| |
| var myLeftBtn;
| |
| var myRightBtn;
| |
| | |
| function startGame() {
| |
| myGamePiece = new component(30, 30, "red", 10, 120);
| |
| myUpBtn = new component(30, 30, "blue", 50, 10);
| |
| myDownBtn = new component(30, 30, "blue", 50, 70);
| |
| myLeftBtn = new component(30, 30, "blue", 20, 40);
| |
| myRightBtn = new component(30, 30, "blue", 80, 40);
| |
| myGameArea.start();
| |
| }
| |
| | |
| | |
| var myGameArea = {
| |
| canvas : document.createElement("canvas"),
| |
| start : function() {
| |
| this.canvas.width = 480;
| |
| this.canvas.height = 270;
| |
| this.context = this.canvas.getContext("2d");
| |
| document.body.insertBefore(this.canvas, document.body.childNodes[0]);
| |
| this.interval = setInterval(updateGameArea, 20);
| |
| window.addEventListener('mousedown', function (e) {
| |
| myGameArea.x = e.pageX;
| |
| myGameArea.y = e.pageY;
| |
| })
| |
| window.addEventListener('mouseup', function (e) {
| |
| myGameArea.x = false;
| |
| myGameArea.y = false;
| |
| })
| |
| window.addEventListener('touchstart', function (e) {
| |
| myGameArea.x = e.pageX;
| |
| myGameArea.y = e.pageY;
| |
| })
| |
| window.addEventListener('touchend', function (e) {
| |
| myGameArea.x = false;
| |
| myGameArea.y = false;
| |
| })
| |
| },
| |
| clear : function(){
| |
| this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
| |
| }
| |
| }
| |
| | |
| function component(width, height, color, x, y) {
| |
| this.width = width;
| |
| this.height = height;
| |
| this.speedX = 0;
| |
| this.speedY = 0;
| |
| this.x = x;
| |
| this.y = y;
| |
| this.update = function() {
| |
| ctx = myGameArea.context;
| |
| ctx.fillStyle = color;
| |
| ctx.fillRect(this.x, this.y, this.width, this.height);
| |
| }
| |
| this.clicked = function() {
| |
| var myleft = this.x;
| |
| var myright = this.x + (this.width);
| |
| var mytop = this.y;
| |
| var mybottom = this.y + (this.height);
| |
| var clicked = true;
| |
| if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
| |
| clicked = false;
| |
| }
| |
| return clicked;
| |
| }
| |
| }
| |
| | |
| function updateGameArea() {
| |
| // myGameArea.clear();
| |
| if (myGameArea.x) {
| |
| myGamePiece = new component(30, 30, "green", myGameArea.x, myGameArea.y);
| |
|
| |
| if (myUpBtn.clicked()) {
| |
| // myGamePiece.y -= 1;
| |
| }
| |
| if (myDownBtn.clicked()) {
| |
| // myGamePiece.y += 1;
| |
| }
| |
| if (myLeftBtn.clicked()) {
| |
| // myGamePiece.x += -1;
| |
| }
| |
| if (myRightBtn.clicked()) {
| |
| // myGamePiece.x += 1;
| |
| }
| |
| }
| |
| myUpBtn.update();
| |
| myDownBtn.update();
| |
| myLeftBtn.update();
| |
| myRightBtn.update();
| |
| myGamePiece.update();
| |
| }
| |
| | |
| </script>
| |
| | |
| <p>Click on the blue "buttons" to make the red square move.</p>
| |
| </body>
| |
| </html>
| |
| </pre>}}
| |
| | |
| {{clear}}
| |
|
| |
|
| = Ritprogrammet = | | = Ritprogrammet = |
| Rad 1 243: |
Rad 1 119: |
| } | | } |
|
| |
|
| // Här b�rjar koden inspirerad av spelprogrammering.nu | | // Här börjar koden inspirerad av spelprogrammering.nu |
|
| |
|
|
| |
|
| Rad 1 250: |
Rad 1 126: |
| context.fillStyle = color | | context.fillStyle = color |
| context.fillRect(x, y, w, l); | | context.fillRect(x, y, w, l); |
| }
| |
|
| |
| function myCircle(x, y, r, t, color)
| |
| {
| |
| context.beginPath();
| |
| context.arc(x,y,r,t, 2.2*Math.PI);
| |
| context.fillStyle = color;
| |
| context.fill();
| |
| } | | } |
|
| |
|
| Rad 1 267: |
Rad 1 135: |
| } | | } |
|
| |
|
| // rita de f�rgade rutorna | | // rita de f?rgade rutorna |
| this.myRectangle(x0, y0, bredd, hojd, "green"); | | this.myRectangle(x0, y0, bredd, hojd, "green"); |
| this.myRectangle(x0, y0 + distance, bredd, hojd, "blue"); | | this.myRectangle(x0, y0 + distance, bredd, hojd, "blue"); |
| Rad 1 274: |
Rad 1 142: |
| this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink"); | | this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink"); |
|
| |
|
| // v�lj f�rg att rita med | | // v?lj f?rg att rita med |
| window.addEventListener('keydown',this.check,false); | | window.addEventListener('keydown',this.check,false); |
|
| |
|
| Rad 1 283: |
Rad 1 151: |
| function check(e) { | | function check(e) { |
| var code = e.keyCode | | var code = e.keyCode |
| // ändra färg | | // Ändra färg |
| if (code == 71) | | if (code == 71) |
| color = "green"; | | color = "green"; |
| Rad 1 292: |
Rad 1 160: |
| if (code == 80) | | if (code == 80) |
| color = "pink"; | | color = "pink"; |
| // ändra radie | | // Ändra radie |
| if (code == 49) | | if (code == 49) |
| radie = 5; | | radie = 5; |
| Rad 1 298: |
Rad 1 166: |
| radie = 10; | | radie = 10; |
| } | | } |
|
| |
| </pre> | | </pre> |
| }} | | }} |
|
| |
|
| | === Exempel === |
| | |
| | : Ett [https://19huhe.ssis.nu/ritprogram/ ritprogram] av Hugo Helm |
| | : Ett [https://19thli.ssis.nu/wp-content/uploads/2019/09/index.html ritprogram] av Theresia Lindahl. |
| <headertabs /> | | <headertabs /> |