|
|
| Rad 1 025: |
Rad 1 025: |
|
| |
|
| }} | | }} |
| {{clear}}
| |
|
| |
| == Gör ett ritprogram ==
| |
|
| |
| [[Fil:Ritprogram1.PNG|400px|höger]]
| |
|
| |
| 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}} | | {{clear}} |
|
| |
|