<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<style>
#canvas{
border:1px solid black;
}
</style>
<canvas id = "canvas" widht = "320" height = "320"></canvas>
<script type="text/javascript" src ="engine.js"></script>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
creatures = [];
food = [];
help1 = 0;
help2 = 0;
creatures.push({x:144,y:144,w:32,h:32,range:100});
document.addEventListener("mousedown",function(e){
food.push({x:e.pageX,y:e.pageY,w:16,h:16});
})
function game(){
ctx.clearRect(0,0,320,320);
for(i in creatures){
ctx.fillRect(creatures[i].x,creatures[i].y,creatures[i].w,creatures[i].h);
arc(creatures[i],100,"red");
for(j in food){
if(creatures[i].x + creatures[i].range >= food[j].x && creatures[i].y + creatures[i].range >= food[j].y){
if(food[j].x <= creatures[i].x + creatures[i].range && food[j].y <= creatures[i].y + creatures[i].range){
creatures[i].x = creatures[i].x + 1/100 * (food[j].x - creatures[i].x);
creatures[i].y = creatures[i].y + 1/100 * (food[j].y - creatures[i].y);
}
}
collision(creatures[i],food[j],function(){
food.splice(j,1);
})
}
}
for(i in food){
ctx.fillRect(food[i].x,food[i].y,food[i].w,food[i].h);
}
}
setInterval(game,20);
</script>
</body>
</html>