#character position absolute; top 100px; left 100px; width 50px; height 50px; background-image urlimgplayer3gif; background-size cover; cursor pointer; #treasure position absolute
<style>
body{
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
#game-container{
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
background-color: #fff;
border: 1px solid #ddd;
overflow: hidden;
}
#character{
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
background-image: url('img/player3.gif');
background-size: cover;
cursor: pointer;
}
#treasure{
position: absolute;
top: 300px;
left: 500px;
width: 50px;
height: 50px;
background-image: url('img/pet.gif');
background-size: cover;
}
</style>
</head>
<body>
<div id="game-container">
<div id="character"></div>
<div id="treasure"></div>
</div>
<script>
// 角色状态
var isTransformed = false;
// 监听鼠标双击事件
$('#character').dblclick(function(){
transformCharacter();
});
<pre><code> // 监听键盘事件
$(document).keydown(function(event){
switch(event.keyCode){
case 65: // 左
moveCharacter('left');
break;
case 87: // 上
moveCharacter('up');
break;
case 68: // 右
moveCharacter('right');
break;
case 83: // 下
moveCharacter('down');
break;
}
});
// 角色移动
function moveCharacter(direction){
var character = $('#character');
var currentPosition = character.position();
var newPosition = {};
switch(direction){
case 'left':
newPosition = {top: currentPosition.top, left: currentPosition.left - 50};
character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_left.gif' : 'img/player_left.gif') + ')');
if(newPosition.left < 0){
newPosition.left = 0;
}
break;
case 'right':
newPosition = {top: currentPosition.top, left: currentPosition.left + 50};
character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_right.gif' : 'img/player_right.gif') + ')');
if(newPosition.left > 550){
newPosition.left = 550;
}
break;
case 'up':
newPosition = {top: currentPosition.top - 50, left: currentPosition.left};
character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
if(newPosition.top < 0){
newPosition.top = 0;
}
break;
case 'down':
newPosition = {top: currentPosition.top + 50, left: currentPosition.left};
character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
if(newPosition.top > 350){
newPosition.top = 350;
}
break;
}
character.animate(newPosition, 200);
checkTreasure();
}
// 角色变身
function transformCharacter(){
isTransformed = !isTransformed;
var character = $('#character');
character.css('background-image', 'url(' + (isTransformed ? 'img/player2.gif' : 'img/player3.gif') + ')');
}
// 检查是否找到宝箱
function checkTreasure(){
var character = $('#character');
var treasure = $('#treasure');
var characterPosition = character.position();
var treasurePosition = treasure.position();
var distanceX = Math.abs(characterPosition.left - treasurePosition.left);
var distanceY = Math.abs(characterPosition.top - treasurePosition.top);
if(distanceX < 50 && distanceY < 50){
// 角色找到了宝箱
alert('你找到了宝箱！');
treasure.css('background-image', 'url(img/player_big.gif)');
}
}
</script>
</code></pre>
原文地址: http://www.cveoy.top/t/topic/bGnb 著作权归作者所有。请勿转载和采集!