読者です 読者をやめる 読者になる 読者になる

happasukeの覚書

私がググらなくてもいいよう記事にします。またそのほかにも感じたことも書き綴りたいと思います。

スネークゲームをcanvasで動かしてみる

web系

 先日Processingでスネークゲームを作成しました。

 後輩が課題で作っていたので便乗しました。

 

 それをHTML5canvasに書き換えて動かしてみます。

 

 とりあえずパソコン向けにキーボード操作で動かせるようにしてみます。

 作成したコードがこちら。

<!DOCTYPE html>
<html>
<head>
    <title>snakegame</title>
    <meta charset="UTF-8"></meta>
</head>

<script type="text/javascript">

<!--
var canvas;
var context;

var mouse;    //food's name
var mike;    //snake's name
var c;
var timerId;
var sub=0;

document.addEventListener("keydown",readKey);


var foodClass = (function(){
    //constructor
    var foodClass = function(){
        this.x;
        this.y;
    };

    //method
    var t = foodClass.prototype;

    t.makefood = function(){
        this.x = Math.ceil(Math.random()*24);
        this.y = Math.ceil(Math.random()*24);
    };

    t.drawfood = function(){
        context.fillStyle = 'rgb(0,0,255)';
        context.fillRect(this.x*20,this.y*20,20,20);
    };

    return foodClass;
})();


var snakeClass = (function(){
    //constructor
    var snakeClass = function(){
        this.out = 0;
        this.x = 12;
        this.y = 12;
        this.l = 1;
        this.v = 2;//1:upper 2:down 3:left 4:right
        this.xelm = new Array(300);
        this.yelm = new Array(300);
    };

    //method

    var t = snakeClass.prototype;

    t.falldown = function(){
//         context.clearRect(0,0,500,500);//screen reset
    };

    t.drawSnake = function(){
        if(this.x<25 && this.y<25 && this.x>0 && this.y>0 && this.out==0){

              switch(this.v){
                case 1:this.y--;break;
                case 2:this.y++;break;
                case 3:this.x--;break;
                case 4:this.x++;break;
              }

              this.update();


            context.fillStyle = 'rgb(255,0,0)';

            for(var i=0;i<this.l;i++){
                context.fillRect(this.xelm[i]*20,this.yelm[i]*20,20,20);
            }

        }else{
            clearInterval(timerId);
            alert("game over!  score:" + (this.l-1));

            console.log("elements:")
            for(var i=0;i<this.l;i++){
                console.log(this.xelm[i] + ',' + this.yelm[i]);
            }
            console.log("cul:x" + this.x +' y'+this.y);
        }
    };

    t.eaten = function(){
        console.log("");
        console.log(this.l + ','  + this.x + ',' + this.y);

        this.xelm[this.l] = this.x;
        this.yelm[this.l] = this.y;
        this.l++;

        for(var i=0;i<this.l;i++){
            console.log(this.xelm[i] + ',' + this.yelm[i]);
        }
    };

    t.update = function(){
        for(var i=this.l-1;i>0;i--){
            this.xelm[i] = this.xelm[i-1];
            this.yelm[i] = this.yelm[i-1];
            if(this.yelm[i]==this.y&&this.xelm[i]==this.x){
                this.out = 1;
            }
        }

        this.xelm[0] = this.x;
          this.yelm[0] = this.y;

    };

    return snakeClass;
})();


function setScript(){
    init();
    timerId = setInterval("snakeScript()",200-sub);
}

function figurePropatiesInit(){
    var context = canvas.getContext('2d');

    context.strokeStyle = 'rgb(0,255,0)';
    context.fillStyle   = 'rgb(0,0,255)';
}

function init(){
    canvas = document.getElementById('sketch');
    context = canvas.getContext('2d');
    figurePropatiesInit();

    mouse = new foodClass();
    mouse.makefood();

    mike = new snakeClass();
    c=0;
}


function snakeScript(){

    if(canvas.getContext==null){
        alert("not support");
    }else{

        context.clearRect(0,0,500,500);//screen reset

        mike.drawSnake();
        mouse.drawfood();

        if(mike.x==mouse.x && mike.y==mouse.y){
            mike.eaten();
            mouse.makefood();
        }

        sub += 5;
    }
}


function readKey(e){
    var key = e.keyCode;

    switch(key){
        case 65://a
            if(mike.v!=4)mike.v = 3;
            break;
        case 68://d
            if(mike.v!=3)mike.v = 4;
            break;
        case 87://w
            if(mike.v!=2)mike.v = 1;
            break;
        case 83://s
            if(mike.v!=1)mike.v = 2;
            break;
    }
}

//-->
</script>

<style type="text/css">
    body{
        width:1000px;
    }

    #sketch{
        background-color: #000000;
    }
</style>

<body onLoad="setScript()">

<canvas id="sketch" width="500" height="500">

</canvas>

</body>
</html>

 canvasは初めて使いましたが本当に簡単にものが作れてしまいますね。すごいです。

 

 html5ではスマホの加速度センサーを使えるようなので次はスマホでも動かせるようにしてみようかと思います。