鍵盤監聽事件--向左

瓜瓜東西發表於2014-08-14
事件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
   
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF"; //設定顏色
context.fillRect(0, 0, 400, 300); //畫正方形
context.fillStyle = "red"; //顏色
context.strokeStyle = "blue"; //邊框顏色
context.lineWidth = 1;//邊框線寬度
context.fillRect(50, 50, 100, 100);
context.strokeRect(50, 50, 100, 100);

var img = new Image();
img.src="<%=request.getContextPath()%>/img/game/askway/a.jpg";
context.drawImage(img,0,0); 

setInterval(move,50);
}
var j=1;
var z=1;
function move()
{
$("#part3").css("background-position",-(120 * (j+1)+70*j)+"px "+-(93*z+100*z)+"px");
j++;
if(j==6){
j=0;
z++;
}
if(z==3){
j=0;
z=0;
}
}

var i=50;
function rehua(){
setInterval(redraw,30);
}
function redraw(){
//var context = $("#canvas").getContext("2d");
var context = document.getElementById("canvas").getContext("2d");
context.clearRect(0, 0, 400, 300);
var img = new Image();
img.src="<%=request.getContextPath()%>"
+"/img/game/askway/a.jpg";
context.drawImage(img, i, i);
i++;
}


function renrehua() {
/* alert($("#part5").position().top);
alert($("#part5").position().left);
alert($("#part5").offset().left);
alert($("#part5").offset().top); */
setInterval(zoulu, 100);
}
var k = 1;
var l = 0;
function zoulu() {
//alert($("#part5").css("left"));  //auto
//alert($("#part5").offsetLeft);  //undifined


$("#part5").css(
"background-position",
-(35 + k * 70 + 60 * k) + "px " + -(15 + l * 100 + l * 35)
+ "px");
k++;
if (k == 4) {
k = 0;
}


$("#part5").css("left", $("#part5").position().left + 5);
//alert($("#part5").position().left);
}


$(document).keydown(function(event){
switch(event.which){
case 37:alert("ddd");break;//左邊
/* case 38:$("#person").css("top",((x-10)+"px"));break;
case 39:$("#person").css("left",((x+10)+"px"));break;
case 40:$("#person").css("top",((x+10)+"px"));break; */
default:break;
}
});
</script>
<style type="text/css">
#part1 {
border: solid 1px blue;
width: 90px;
height: 68px;
background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg);
background-repeat: no-repeat;
display: none;
}


#part2 {
border: solid 1px blue;
width: 90px;
height: 68px;
background-image: url(<%=request.getContextPath()%>/img/game/askway/a.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
display: none;
}


#part3 {
border: solid 1px blue;
width: 70px; /* 960  576  192 192*/
height: 100px;
background-image: url(<%=request.getContextPath()%>/img/game/askway/b.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -120px -0px;
/* background-position:10% 5%; */
}


#part4 {
width: 500px;
height: 400px;
border: blue 1px solid;
/* position:relative; */
}


#part5 {
position: absolute;
width: 70px;
height: 100px;
background-image: url(<%=request.getContextPath()%>/img/game/askway/c.png);
background-repeat: no-repeat;
background-position: -35px -15px;
}
</style>
</head>
<body>
<input type="button" onclick="draw('canvas');" value="移動">
<input type="button" onclick="rehua();" value="持續移動">
<input type="button" onclick="renrehua()" value="人物走動" />
<div id="part1"></div>
<br>
<div id="part2"></div>
<br>
<div id="part3"></div>
<div id="part4">
<div id="part5"></div>
</div>
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>

相關文章