Skip to content

Instantly share code, notes, and snippets.

@naive17
Created March 11, 2018 11:14
Show Gist options
  • Save naive17/4c524a557275aff224d36d2a108738b0 to your computer and use it in GitHub Desktop.
Save naive17/4c524a557275aff224d36d2a108738b0 to your computer and use it in GitHub Desktop.
<style id="jsbin-css">
.player {
background-color : red;
width : 32px;
height : 32px;
position : absolute;
transition : all .8s linear;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div id="app" v-on:keyup.up="move('up')" v-on:keyup.down="move('down')">
<p>{{keydown}}</p>
<p>{{direction}}</p>
<div class="player" v-bind:style="{ top : computedy , left : computedx }"></div>
</div>
<script id="jsbin-javascript">
var app = new Vue({
el :"#app",
data : {
x : 0,
y : 0,
moving :false,
keydown : false,
direction : "up"
},
computed : {
computedx : function(){
return this.x * 32;
},
computedy : function(){
return this.y * 32;
}
},
created: function () {
window.addEventListener('keydown',this.setkeydown);
window.addEventListener('keyup',this.setkeyup);
},
methods : {
setkeydown : function(event){
switch(event.keyCode){
case 38: // UP
this.direction = "up";
break;
case 39: // RIGHT
this.direction = "right";
break;
case 40: // DOWN
this.direction = "down";
break;
case 37: // LEFT
this.direction = "left";
break;
}
this.keydown = true;
},
setkeyup : function(event){
this.keydown = false;
}
}
})
</script>
<script id="jsbin-source-css" type="text/css">.player {
background-color : red;
width : 32px;
height : 32px;
position : absolute;
transition : all .8s linear;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
el :"#app",
data : {
x : 0,
y : 0,
moving :false,
keydown : false,
direction : "up"
},
computed : {
computedx : function(){
return this.x * 32;
},
computedy : function(){
return this.y * 32;
}
},
created: function () {
window.addEventListener('keydown',this.setkeydown);
window.addEventListener('keyup',this.setkeyup);
},
methods : {
setkeydown : function(event){
switch(event.keyCode){
case 38: // UP
this.direction = "up";
break;
case 39: // RIGHT
this.direction = "right";
break;
case 40: // DOWN
this.direction = "down";
break;
case 37: // LEFT
this.direction = "left";
break;
}
this.keydown = true;
},
setkeyup : function(event){
this.keydown = false;
}
}
})</script></body>
.player {
background-color : red;
width : 32px;
height : 32px;
position : absolute;
transition : all .8s linear;
}
var app = new Vue({
el :"#app",
data : {
x : 0,
y : 0,
moving :false,
keydown : false,
direction : "up"
},
computed : {
computedx : function(){
return this.x * 32;
},
computedy : function(){
return this.y * 32;
}
},
created: function () {
window.addEventListener('keydown',this.setkeydown);
window.addEventListener('keyup',this.setkeyup);
},
methods : {
setkeydown : function(event){
switch(event.keyCode){
case 38: // UP
this.direction = "up";
break;
case 39: // RIGHT
this.direction = "right";
break;
case 40: // DOWN
this.direction = "down";
break;
case 37: // LEFT
this.direction = "left";
break;
}
this.keydown = true;
},
setkeyup : function(event){
this.keydown = false;
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment