如何在canvas里判断出鼠标在舞台中心的左右位置
本文介绍了如何在canvas里判断出鼠标在舞台中心的左右位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
这是代码里的两张图片
鼠标像在舞台中心左边往右走
鼠标像在舞台中心右边往左走
我自己写了一个简单的效果
必须鼠标一直动才会走
如何才能让他放在右边就走
<html>
<head>
<meta charset="UTF-8">
<title>Endless Runner Game Demo</title>
<style>
body { background-color: #000000; }
canvas { background-color: #222222; }
</style>
</head>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<body onload="init();">
<div align="center" >
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js"></script>
<script>
function init() {
/*alert("init() successfully called.");*/
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(
512,
384,
{view:document.getElementById("game-canvas")}
);
var farTexture = PIXI.Texture.fromImage("img/bg-far.png");
far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
far.position.x = 0;
far.position.y = 0;
far.tilePosition.x = 0;
far.tilePosition.y = 0;
stage.addChild(far);
var midTexture = PIXI.Texture.fromImage("img/bg-mid.png");
mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);
mid.position.x = 0;
mid.position.y = 128;
mid.tilePosition.x = 0;
mid.tilePosition.y = 0;
stage.addChild(mid);
stage.interactive=true;
/*stage.buttonMode=true;*/
stage.on('mousemove',shubiao);
requestAnimationFrame(update);
}
function update() {
renderer.render(stage);
requestAnimationFrame(update);
}
function shubiao(ev){
var windosW=$(window).width();
$(document).mousemove(function (e) {
x = windosW/2>=e.pageX;
});
if(x){
far.tilePosition.x += 1;
mid.tilePosition.x += 2;
}else{
far.tilePosition.x -= 1;
mid.tilePosition.x -= 2;
}
}
</script>
</body>
</html>
解决方案
<html>
<head>
<meta charset="UTF-8">
<title>Endless Runner Game Demo</title>
<style>
body { background-color: #000000; }
canvas { background-color: #222222; }
</style></head>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<body onload="init();">
<div align="center" >
<canvas id="game-canvas" width="512" height="384"></canvas></div>
<script src="https://cdnjs.cloudflare.com/...
<script>
var x;
var windosW=$(window).width();
$("#game-canvas").mousemove(function (e) {
x = windosW/2>=e.pageX;
});
function init() {
/*alert("init() successfully called.");*/
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(
512,
384,
{view:document.getElementById("game-canvas")}
);
var farTexture = PIXI.Texture.fromImage("img/bg-far.png");
far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
far.position.x = 0;
far.position.y = 0;
far.tilePosition.x = 0;
far.tilePosition.y = 0;
stage.addChild(far);
var midTexture = PIXI.Texture.fromImage("img/bg-mid.png");
mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);
mid.position.x = 0;
mid.position.y = 128;
mid.tilePosition.x = 0;
mid.tilePosition.y = 0;
stage.addChild(mid);
/*stage.interactive=true;*/
/*stage.buttonMode=true;*/
/*stage.on('mousemove',shubiao);*/
requestAnimationFrame(update);
}
function update() {
if(x){
far.tilePosition.x += .5;
mid.tilePosition.x += .8;
}else{
far.tilePosition.x -= .5;
mid.tilePosition.x -= .8;
}
renderer.render(stage);
requestAnimationFrame(update);
}
</script>
</body>
</html>
这篇关于如何在canvas里判断出鼠标在舞台中心的左右位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
